<!DOCTYPE html>
<html>

<head>
	<style>

		@keyframes rotate-frame {
			0% {

				transform: rotateX(-20deg) rotateY(0deg);
			}
			10% {
				transform: rotateX(-20deg) rotateY(36deg);
			}
			20% {
				transform: rotateX(-20deg) rotateY(72deg);
			}
			30% {
				transform: rotateX(-20deg) rotateY(108deg);
			}
			40% {
				transform: rotateX(-20deg) rotateY(144deg);
			}
			50% {
				transform: rotateX(-20deg) rotateY(180deg);
			}
			60% {
				transform: rotateX(-20deg) rotateY(216deg);
			}
			70% {
				transform: rotateX(-20deg) rotateY(252deg);
			}
			80% {
				transform: rotateX(-20deg) rotateY(288deg);
			}
			90% {
				transform: rotateX(-20deg) rotateY(324deg);
			}
			100% {
				transform: rotateX(-20deg) rotateY(360deg);
			}
		}
		body {
			background: #f9f9f9;
		}
		.photo-wrap {
			perspective: 800px;
			width: 800px;
		}
		.container {
			width: 800px;
			height: 500px;
			margin: 0 auto;
			position: relative;
			transform-style: preserve-3d;
			transform:rotateX(-10deg);
			animation: rotate-frame 10s linear infinite;
		}
		.img {
			width: 200px;
			height: 118px;
			line-height: 118px;
			text-align: center;
			position: absolute;
			top: 160px;
			left: 300px;
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.9) inset;
			-webkit-box-reflect:below 3px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,0.5));
			background: pink;
			background:-moz-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
			background:-webkit-gradient(linear, 0 0, 0 bottom, from(#ccccff), to(rgba(174, 221, 129, 0.5)));
			background:-o-linear-gradient(top, pink, rgba(0, 0, 255, 0.5));
			transform: rotateY(0deg);
		}
		.img01 {
			transform: rotateY(0deg) translateZ(300px);
		}
		.img02 {
			transform: rotateY(40deg) translateZ(300px);
		}
		.img03 {
			transform: rotateY(80deg) translateZ(300px);
		}
		.img04 {
			transform: rotateY(120deg) translateZ(300px);
		}
		.img05 {
			transform: rotateY(160deg) translateZ(300px);
		}
		.img06 {
			transform: rotateY(200deg) translateZ(300px);
		}
		.img07 {
			transform: rotateY(240deg) translateZ(300px);
		}
		.img08 {
			transform: rotateY(280deg) translateZ(300px);
		}
		.img09 {
			transform: rotateY(320deg) translateZ(300px);
		}
	</style>
</head>

<body class="body">
<h1>欢迎来到后台管理系统</h1>
<div class="photo-wrap">  <!-- 舞台 -->
	<div class="container">   <!-- 容器 -->
		<div class="img"><img src="images/house10.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img01"><img src="images/house1.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img02"><img src="images/house2.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img03"><img src="images/house3.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img04"><img src="images/house4.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img05"><img src="images/house5.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img06"><img src="images/house6.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img07"><img src="images/house7.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img08"><img src="images/house8.jpg" style="width: 200px ;height: 200px"></div>
		<div class="img img09"><img src="images/house9.jpg" style="width: 200px ;height: 200px"></div>
	</div>
</div>
</body>
</html>